<!DOCTYPE html><html><head><meta charset="utf-8"><style>html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body{
  color:#444;
  font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman',
              "Hiragino Sans GB", "STXihei", "微软雅黑", serif;
  font-size:12px;
  line-height:1.5em;
  background:#fefefe;
  width: 45em;
  margin: 10px auto;
  padding: 1em;
  outline: 1300px solid #FAFAFA;
}

a{ color: #0645ad; text-decoration:none;}
a:visited{ color: #0b0080; }
a:hover{ color: #06e; }
a:active{ color:#faa700; }
a:focus{ outline: thin dotted; }
a:hover, a:active{ outline: 0; }

span.backtick {
  border:1px solid #EAEAEA;
  border-radius:3px;
  background:#F8F8F8;
  padding:0 3px 0 3px;
}

::-moz-selection{background:rgba(255,255,0,0.3);color:#000}
::selection{background:rgba(255,255,0,0.3);color:#000}

a::-moz-selection{background:rgba(255,255,0,0.3);color:#0645ad}
a::selection{background:rgba(255,255,0,0.3);color:#0645ad}

p{
margin:1em 0;
}

img{
max-width:100%;
}

h1,h2,h3,h4,h5,h6{
font-weight:normal;
color:#111;
line-height:1em;
}
h4,h5,h6{ font-weight: bold; }
h1{ font-size:2.5em; }
h2{ font-size:2em; border-bottom:1px solid silver; padding-bottom: 5px; }
h3{ font-size:1.5em; }
h4{ font-size:1.2em; }
h5{ font-size:1em; }
h6{ font-size:0.9em; }

blockquote{
color:#666666;
margin:0;
padding-left: 3em;
border-left: 0.5em #EEE solid;
}
hr { display: block; height: 2px; border: 0; border-top: 1px solid #aaa;border-bottom: 1px solid #eee; margin: 1em 0; padding: 0; }


pre , code, kbd, samp { 
  color: #000; 
  font-family: monospace; 
  font-size: 0.88em; 
  border-radius:3px;
  background-color: #F8F8F8;
  border: 1px solid #CCC; 
}
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 5px 12px;}
pre code { border: 0px !important; padding: 0;}
code { padding: 0 3px 0 3px; }

b, strong { font-weight: bold; }

dfn { font-style: italic; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 2em; }
li p:last-child { margin:0 }
dd { margin: 0 0 0 2em; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

@media only screen and (min-width: 480px) {
body{font-size:14px;}
}

@media only screen and (min-width: 768px) {
body{font-size:16px;}
}

@media print {
  * { background: transparent !important; color: black !important; filter:none !important; -ms-filter: none !important; }
  body{font-size:12pt; max-width:100%; outline:none;}
  a, a:visited { text-decoration: underline; }
  hr { height: 1px; border:0; border-bottom:1px solid black; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page :left { margin: 15mm 20mm 15mm 10mm; }
  @page :right { margin: 15mm 10mm 15mm 20mm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}
</style></head><body><h1 id="javascript-class">JavaScript class</h1>

<p>A class is a function that can be newed up to obtain an pre-built object with properties and functions.</p>

<pre><code>var MyClass = (function (name) {
    var my = {};

    my.hello = "Hello " + name;

    return my;
});

var c = new MyClass("Chris");
</code></pre>

<h1 id="scope-of-used-but-undeclared-variable">Scope of used, but undeclared variable</h1>

<p>I think it's the scope of the current function. If there is no function, then it becomes global. (Haven't looked it up or tried. I'm guessing from my usage of JavaScript so far.)</p>

<h1 id="div-vs-span">div vs. span</h1>

<p>Div is a block-level element, while span is an inline element. Default browser stylesheet will but line breaks after blocks, but not after inline elements. It also has different effects when floating, clearing and so on.</p>

<h1 id="click-event">click event</h1>

<pre><code>var element = document.getElementById("someid");
var handler = function () {
    alert("Oh dear, you clicked me!");
}
if(element.addEventListener) {
  element.addEventListener("click", handler, false);
} else {
  element.attachEvent("onclick", handler);
}
</code></pre>

<h1 id="data-attributes">data attributes</h1>

<p>Data attributes are to be used for micro-formats for specific purposes. They are meant to add machine readable data to HTML content, which is usually trying to be human readable.</p>

<h1 id="optimize-selector">Optimize selector</h1>

<pre><code>$("#bar");
</code></pre>

<h1 id="linked-list-in-js">Linked list in JS</h1>

<pre><code>var Node = (function (value, next) {
    var my = {};

    my.value = value;
    my.next = next;

    return my;
});

var LinkedList = (function (node) {
    var my = {};

    my.begin = node;
    my.last = node;

    my.add = function (node) {
        if (my.last != null) {
            my.last.next = node;
            my.last = node;
        }
        else {
            my.begin = node;
            my.last = node;
        }
    };

    my.print = function () {
        var node = my.begin;
        while (node != null) {
            console.log(node.value);
            node = node.next;
        }
    }

    return my;
});

var list = new LinkedList(new Node("one"));
list.add(new Node("two"));
list.print();
</code></pre>

<h1 id="convert-array-to-linked-list">Convert array to linked list</h1>

<pre><code>var arr = [ "one", "two" ];
var arrayList = new LinkedList();
foreach (var i = 0; i &lt; arr.length; i++) {
    arrayList.add(new Node(arr[i]));
}
</code></pre>

<h1 id="reverse-linked-list">Reverse linked list</h1>

<p>Within LinkedList class:</p>

<pre><code>    my.reverse = function () {
        var reversedList = new LinkedList();
        my._getNode(reversedList, my.begin);
        return reversedList;
    }

    my._getNode = function (reversedList, node) {
        if (node.next) {
            my._getNode(reversedList, node.next);
        }
        reversedList.add(new Node(node.value));
    }
</code></pre>

<h1 id="retrieval-of-element-in-array-vs-linked-list">Retrieval of element in array vs. linked list</h1>

<p>As far as I know, it is faster in an array, because each element is at a specific memory address and the lookup is O(1).</p>

<h1 id="tree-to-array">Tree to array</h1>

<p>Only way I can think of that answer the question is to have each element in the new array have a "parentIndex" property that refers to the index in the array of the parent.</p>

<p>e.g.</p>

<pre><code>[ { name: "parent1" }, { name: "child1", parentIndex: 0 }, { name: "parent2" }, { name: "child2", parentIndex: 2 }, { name: "child3", parentIndex: 2 }]
</code></pre>

<p>Which, when rebuilding the tree, allows us to find a parent, then find all the children in the array and add them to the parent's list of children.</p>

<h1 id="programmatic-interface-for-combobox">Programmatic interface for ComboBox</h1>

<pre><code>interface IComboBox
{
    List Items;
    string Text;
    string SelectedItem;
}
</code></pre>

<p>Set Items at render. If the user enters text, SelectedItem is null. Otherwise, it contains the selected value.</p>

<h1 id="toggle-button">Toggle button</h1>

<p>Graphically? I would honestly find a design online and buy it or reproduce it. I do not know how to design very well.</p>

<h1 id="drag-and-drop">drag and drop</h1>

<p><em>* Events *</em></p>

<ul>
<li>mouse down (position x, y + element clicked)</li>
<li>begin drag (position x, y + element dragged)</li>
<li>mouse move (position x, y + element dragged. repeat X times)</li>
<li>end drag (position x, y + element dragged)</li>
<li>mouse up (position x, y + element dragged)</li>
</ul>

<h1 id="ordered-list-3rd-item">ordered list 3rd item</h1>

<pre><code>#myOrderedList li:eq(2)
</code></pre>

<h1 id="odd-rows-subsequent-cell">odd rows + subsequent cell</h1>

<pre><code>#myTable tr:nth-child(odd), #myTable tr:nth-child(odd) td
</code></pre>

<h1 id="non-standard-fonts">Non-standard fonts</h1>

<p>I would use @font-face from CSS3. Support is huge in all browsers (even IE7!). It's easy to get fonts in all the supported formats and rendering speeds are decent enough.</p>

<h1 id="css-sprite">CSS sprite</h1>

<p>CSS sprites are the act of putting a bunch of small (or big, really) images inside a bigger one. Then, applying the image as a background to an element of the appropriate size, and putting the background position to the pixel point of the big image where the smaller image starts.</p>

<p>This has the advantage of only requiring one HTTP connection for image download, which is faster. Larger images also usually compress better.</p>

<h1 id="clearing-techniques">Clearing techniques</h1>

<p>I've personally always simply use overflow: hidden on the surrounding element where elements are floated, with a clear: both; on the following element.</p>

<p>I do know that position: relative can be used to a similar effect, but I really couldn't tell why.</p>
</body></html>